
import React, { Component, createRef } from 'react'
import {
    LockOutlined,
    UserOutlined,
    SecurityScanOutlined,
} from '@ant-design/icons'
import { Button, Form, Input, Space, message,Checkbox } from 'antd'
import { withRouter } from 'react-router-dom'
// 导入封装好的验证码组件
import Captcha from '../../component/Captcha'
import url from '../../config/url'
import req from '../../http/req'
import '../../assets/styles/loginindex.css'

class Login extends Component {
    // ref对象的初始化
    capRef = createRef()
    formRef = createRef()

    state = {
        key: '',
    }

    render() {
        const onFinishFailed = (errorInfo) => {
            message.error('请确认信息')
            // console.log("Failed:", errorInfo);
          };
        return (
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{}}
                onFinish={this.onFinish}
                onFinishFailed={onFinishFailed}
                ref={this.formRef}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名',
                        },
                    ]}
                >
                    <Input
                        id='yonghu'
                        prefix={<UserOutlined />}
                        size="large"
                        placeholder="用户名"
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                    ]}
                >
                    <Input
                    id='mima'
                        prefix={<LockOutlined />}
                        size="large"
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>
                {/* 
                    Form.Item：
                    1. 要么其子元素要么是一个节点，一个节点的时候可以有name
                    2. 要么其子元素由多个节点，但不能有name

                    是否有name影响验证规则是否生效
                */}
                <Form.Item>
                    <Space>
                        <Form.Item
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输验证码',
                                },
                            ]}
                            // noStyle：去除Form.Item的样式，让其仅作为容器组件
                            noStyle={true}
                        >
                            <Input
                            id='yanzheng'
                                prefix={<SecurityScanOutlined />}
                                size="large"
                                type="text"
                                placeholder="验证码"
                            />
                        </Form.Item>
                        <Captcha
                            setKey={this.setKey}
                            h={40}
                            ref={this.capRef}
                        />
                    </Space>
                </Form.Item>
                <Form.Item
                    name="remember"
                    rules={[
                        {
                            required: true,
                            message: '请勾选阅读用户协议',
                        },
                    ]}
                    valuePropName="checked"
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Checkbox> 同意【用户协议】再进行登陆</Checkbox>
                </Form.Item>
                <Form.Item>
                    {/* block：让当前元素的宽度与父元素宽度一致，当然手写样式也可以 */}
                    <Button
                     type="primary" 
                    style={{ width:'100px',
                    margin: ' 0  38%'
                    }}
                     htmlType="submit" 
                     size="large" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        )
    }

    onFinish = (values) => {
        // console.log('Received values of form: ', values)
        // 将key值追加到values里面去
        // application/json    application/x-www-form-urlencoded
        values.key = this.state.key
        req.post(url.PasswdLogin, values).then((res) => {
            if (res.data.errNo === 0) {
                // 成功，告知用户并且跳转到后台首页
                message.success('登录成功！', 3, () => {
                    // dashboard：仪表盘
                    this.props.history.replace('/dashboard/welcome')
                })
            } else {
                // 有错，告知用户并且刷新验证码
                message.error(res.data.errText, 3, () => {
                    this.capRef.current.loadCap()
                    // （可选）清空表单，需要使用表单相关的api方法
                    // console.log(this.formRef.current)
                    this.formRef.current.setFieldsValue({
                        username: '',
                        password: '',
                        captcha: '',
                    })
                })
            }
        })
    }

    /**
     *
     * @param {string} key 验证码对应的key值，在提交表单的时候需要一起提交给后端
     */
    setKey = (key) => {
        this.setState({
            key,
        })
    }
}

export default withRouter(Login)
